var Portfolio = function() {
  //Initiliaze
  itemShow         = 20;
  indexedItemShow  = itemShow - 1
  itemList         = $('#portfolio-item');
  itemWrapper      = $('#portfolio');
  rotation         = ['flipped-vertical-bottom', 'flipped-vertical-top', 'flipped-horizontal-left', 'flipped-horizontal-right'];
  navigation       = $('#navigation a');

  //Populate items
  for( var i = 0; i < itemShow; i++ ) {
    itemLink     = itemList.children('li:eq(' + i + ')').children('a[href]');
    itemImage    = itemList.children('li:eq(' + i + ')').children('a[href]').children('img');
    itemSrc      = itemImage.attr('src');
    itemAlt      = itemImage.attr('alt');
    itemHref     = itemLink.attr('href');
    
    //item = "<p>" + itemHref + "</p>";
    
    item         = '<div style="background:url(' + itemSrc + ')" onclick="window.open(\'' + itemHref + '\',\'new_window\');"> <span>' + itemAlt + '</span></div>';
    //item         = '<a href="' + itemHref + '"><div style="background:url(' + itemSrc + ')"> <span>' + itemAlt + '</span></div></a>';
    itemWrapper.append(item);
    itemCurrent  = itemWrapper.children('div:eq(' + i + ')');
    itemCurrent.hover(function() {
    	$(this).css('cursor','pointer');
    });
  }
  
  
  navigation.on('click', function(e) {
    
    e.preventDefault();

    navigation.removeClass('selected');
    $(this).addClass('selected');
    
    page = $(this).attr('data-page');

    for( var i = 0; i <= indexedItemShow; i++ ) {

      random     = Math.floor( Math.random() * ( 3 - 0 + 1 ) );
      animation  = 'flipped-vertical-bottom';//rotation[random];
      
      item       = itemWrapper.children('div:eq(' + i + ')');

      item.addClass('animated ' + animation);

      window.setTimeout(function (index) {
        return function () {

          indexReal    = (page == 1) ? index : (index + (page - 1)) ;
          itemHost     = indexReal + (indexedItemShow * (page - 1));
          
          itemLink     = itemList.children('li:eq(' + itemHost + ')').children('a[href]');
          itemImage    = itemList.children('li:eq(' + itemHost + ')').children('a[href]').children('img');
          itemSrc      = itemImage.attr('src');
          itemAlt      = itemImage.attr('alt');
          itemHref     = itemLink.attr('href');
          //itemCurrentLink = itemWrapper.children('div:eq(' + index + ')').parent();
          itemCurrent  = itemWrapper.children('div:eq(' + index + ')');
            //itemCurrentLink.attr('href', itemHref);
            itemCurrent.attr('onclick', 'window.open(\'' + itemHref + '\',\'new_window\');');
            itemCurrent.css('background', 'url(' + itemSrc + ')');
            itemCurrent.children('span').text(itemAlt);
            itemCurrent.hover(function() {
            	$(this).css('cursor','pointer');
            });
        };
      } (i), 500);
      
      item.on('transitionend webkitTransitionEnd MSTransitionEnd oTransitionEnd', function() { 
        $(this).removeClass();
      });
    }
  });
};